<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>语音聊天</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div id="chat-container">
        <div id="message-list"></div>
        <input type="text" id="message-input" placeholder="输入消息..." />
        <button id="send-button">发送</button>
    </div>
    <script src="script.js"></script>
    <script>
        const messageInput = document.getElementById("message-input");
        const messageList = document.getElementById("message-list");
        const sendButton = document.getElementById("send-button");

        sendButton.addEventListener("click", () => {
            const message = messageInput.value;
            if (message) {
                const messageElement = document.createElement("div");
                messageElement.classList.add("message");
                messageElement.textContent = message;
                messageList.appendChild(messageElement);
                messageInput.value = "";
            }
        });
    </script>
</body>
</html>